
<template>
  <div class="musicDeitalCard" :class="{'hide':!isMusicDetailCardShow ,'glassCard':!bgMode}">
    <i @click="closeCard" class="iconfont icon-arrow-down-bold"></i>
    <i @click="bgMode =!bgMode" class="iconfont bgset icon-UniSetBackgroundTextStyle"></i>

    <div v-show="musicInfo.name" class="musicCardContainer" ref="contentRef">
      <div class="top">
        <left :musicInfo="musicInfo" />
        <right :musicInfo="musicInfo">
          <lyrics-scroll
            v-show="!nolyric"
            :lyric="lyric"
            :isMusicDetailCardShow="isMusicDetailCardShow"
          />
          <div v-show="nolyric" class="noLryics">暂无歌词</div>
        </right>
      </div>
      <div class="bottom">
        <comment
          commentType="music"
          :comments="hotComments"
          :commentId="musicId+'' "
          @getComment="getMusicComment(musicId)"
          :musicTitle="musicInfo.name"
          class="commentComponent"
          v-show="curPage === 1 "
        >
          <div slot="title">热门评论</div>
        </comment>
        <comment
          commentType="music"
          :comments="comments"
          :commentId=" musicId+'' "
          :musicTitle="musicInfo.name"
          @getComment="getMusicComment(musicId)"
          class="commentComponent"
        >
          <div slot="title">最新评论({{ total }})</div>
        </comment>
        <div class="page" v-show="comments.length">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-size="20"
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <go-top scrollObj=".musicCardContainer" />
    </div>
    <div v-show="!musicInfo.name" class="tip flex3">暂无歌曲</div>
  </div>
</template>
<script>
let timer = null;
let obj = null,
  top = 0;
import Left from "./child/TopLeft.vue";
import Right from "./child/Right.vue";
import LyricsScroll from "components/lyricsScroll/LyricsScroll.vue";
import Comment from "components/comment/Comment.vue";
import { mapState } from "vuex";
import GoTop from "components/goTop/GoTop.vue";
export default {
  name: "musicDeitalCard",
  components: { LyricsScroll, Comment, Right, Left, GoTop },
  data() {
    return {
      bgMode: true,
      curPage: 1,
      comments: [],
      lyric: [0, "正在加载中...."],
      hotComments: [],
      total: 0,
      nolyric: false
    };
  },
  computed: {
    ...mapState(["musicId", "musicInfo", "isMusicDetailCardShow"])
  },
  methods: {
    handleCurrentChange(page) {
      this.curPage = page;
      this.getMusicComment(this.musicId, "changePage");
    },
    async getMusicComment(id, type) {
      if (type === "changePage") {
        if (obj == null) {
          obj = document.querySelector(".musicCardContainer");
          top = obj.querySelector(".top").clientHeight;
        }
        obj.scrollTo({
          behavior: "smooth",
          top: top
        });
      }
      const timestamp = Date.now();
      // 当页数为第一页时，请求10条热门数据
      if (this.curPage == 1) {
        let res = await this.$request("/comment/hot", {
          id,
          limit: 10,
          type: 0,
          timestamp
        });
        if (res.data.code != 200) {
          this.$message.error("获取热门评论失败,请稍后重试!");
          return;
        }
        this.hotComments = res.data.hotComments;
        this.total = res.data.total;
      }
      let res = await this.$request("/comment/music", {
        id,
        offset: (this.curPage - 1) * 20,
        timestamp
      });
      if (res.data.code !== 200) {
        this.$message.error("获取评论失败,请稍后重试!");
      }
      this.comments = res.data.comments;
    },
    async loadLyric(id) {
      this.lyric = [0, "正在加载中...."];
      let res = await this.$request("/lyric", { id });
      if (res.data.nolyric) {
        this.nolyric = true;
        console.log("nolyric");
        return;
      }
      if (this.nolyric) {
        this.nolyric = false;
      }
      let lyrics = res.data.lrc.lyric;
      let item = null,
        value = "",
        time = "",
        t = 0,
        result = [];
      lyrics = lyrics.split("\n");
      lyrics = lyrics.filter(v => v);
      lyrics.forEach(v => {
        item = v.split("]");
        value = item[1];
        time = item[0];
        t = time.slice(1).split(":");
        if (value) {
          result.push([parseInt(t[0]) * 60 + parseFloat(t[1]), value]);
        }
      });
      this.lyric = result;
    },
    closeCard() {
      this.$store.commit("changeMusicDetailCardState");
    },
    cleanCard() {
      this.curPage = 1;
      this.comments = [];
      this.lyric = [0, "正在加载中...."];
      this.hotComments = [];
    }
  },
  watch: {
    "$store.state.isMusicDetailCardShow"(isShow) {
      console.log("isMusicDetailCardShow");
      if (isShow && this.comments.length === 0) {
        this.loadLyric(this.musicId);
        this.getMusicComment(this.musicId);
      }
    },
    "$store.state.musicId"(musicId) {
      if (this.comments.length) {
        console.log("cleanCard");
        this.cleanCard();
      }
      if (this.isMusicDetailCardShow) {
        this.loadLyric(musicId);
        this.getMusicComment(musicId);
      }
    }
  }
};
</script>

<style scoped  >
.musicDeitalCard {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 55px);

  transition: transform 0.5s;
  background-color: #fff;
  background-image: linear-gradient(to bottom, pink, #fff);
  z-index: 1000;
}

.glassCard {
  background-color: unset !important;
  background-image: unset !important;
  backdrop-filter: blur(20px) brightness(95%) !important;
}
.glassCard .commentComponent /deep/ * {
  color: orange;
  border-color: purple;
}
.glassCard .commentComponent /deep/ .replied {
  border-radius: 5px;
  color: #fff;
  background-color: pink;
}
.iconfont {
  position: absolute;
  cursor: pointer;
}
.icon-arrow-down-bold {
  top: 15px;
  left: 20px;
  font-size: 21px;
}
.bgset {
  right: 20px;
  bottom: 10px;
}
.musicCardContainer {
  height: 100%;
  overflow-y: scroll;
}
.hide {
  transform: translateY(100%);
}
.top {
  display: flex;
  justify-content: center;
}
.bottom {
  margin: 40px auto;
  width: 55vw;
}
.page {
  padding-bottom: 20px;
  width: 100%;
  text-align: center;
}
.tip {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
